<template>
  <div>
    <el-dialog
      :title="$t('LineManagementLang.ServiceFee')"
      :visible.sync="Visible"
      width="700px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div style="display:flex; margin-bottom: 5px;gap:10px">
          <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="add">
            <img style="width:12px;margin-top: 2px;" src="../../../assets/img/add.png" alt="">
            <span>{{$t('common.Add')}}</span>
          </div>
        </div>
        <MyTable
        ref="ExpressDeliveryOrderManagement_issueAccounts_ServiceFee_select"
        :gridOptions="{checkboxConfig:{checkField: 'checked', trigger: 'row', highlight: true,checkMethod:checkSelectable}}"
        :tableColumn="tableColumn"
        :tableData="tableData"
        :isOrder="false"
        @sendTabClick="setTabClick"
        @sendCheckBoxList="setCheckBox"
        >
          <template v-slot:content="scope">
            <span v-if="scope.config.templateType=='Select'">
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                <el-select
                  v-fo-select
                  @change="selectChange(scope.row,scope.config.prop)"
                  @visible-change="inputType"
                  v-model="scope.row[scope.config.prop]"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>  
              </span>
              <span v-else>{{ scope.row[scope.config.prop+'_name'] }}</span> 
            </span>
            <span v-else>
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                <el-input-number v-fo v-noFocu v-if="scope.config.templateType=='InputNumber'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="2" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>   
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </span>
          </template>
        </MyTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
    <Add @success="getData" ref="add"></Add>
  </div>
</template>

<script>
import Add from '../../LineManagement/ServiceFeeManagement_add.vue';
export default {
  components: {
    Add,
  },
  props: {
  },
  data() {
    return {
      lid:'',
      Visible: false,
      tableColumn:[
        {
          label: "",
          prop: "table_code",
          width: 40,
        },
        {
          type: 'checkbox',
          width: 40,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Service_fee_name'),
          prop: "name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Server_charging_method'),
          prop: "chargeMethod",
          width: 120,
          templateType:'Select',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Payment_unit_price'),
          prop: "unitPrice",
          width: 100,
          templateType:'InputNumber',
        },
        {
          checked: true,
          label: this.$t('ServiceFeeManagementLang.Payment_cost'),
          prop: "whole_price",
          width: 100,
          templateType:'InputNumber',
        },
      ],
      tableData:[],
      sendDataArr:[],
      options:[],
      tabClickIndex:null,
      tabClickLabel:null,
      my_uid:JSON.parse(sessionStorage.getItem('userData')).uid,
      confirmTrue:true,//确定按钮保护
      selectTrueList:[],
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
    init(id,arr,package_sns) {
      this.getOptions()
      this.lid=id
      this.selectTrueList=arr
      this.package_sns=package_sns
      this.Visible = true;
      this.getData();
    },
    //获取下拉单数据
    getOptions(){
      this.$get("lineSysItems").then((res) => {
        this.options = res.data.survey_type;
      });
    },
    //获取单条
    getData() {
      this.$get("allServices",{lid:this.lid,package_sns:this.package_sns}).then((res) => {
        this.tableData = res.data;
        this.selectTrueList.forEach(item=>{
          let arr=this.tableData.filter(el=>{return el.servicecharge_id==item.servicecharge_id})
          if(arr.length>0){
            if(item.chargeMethod==6){
              arr[0].whole_price=item.whole_price
            }
            this.$refs.ExpressDeliveryOrderManagement_issueAccounts_ServiceFee_select.$refs.tableRef.setCheckboxRow(arr[0],true);
            this.sendDataArr=this.tableData.filter(item=>{return item.checked})
          }
        })
      });
    },
    add(){
      this.$refs.add.init()
    },
    setTabClick({index,label}){
      console.log(this.tableData[index].chargeMethod)
      if(this.tableData[index].chargeMethod==6){
        console.log(label,this.$t('LineManagementLang.Payment_unit_price'))
        if(label!=this.$t('LineManagementLang.Payment_unit_price')){
          this.tabClickIndex=index
          this.tabClickLabel=label
        }
      }else if(this.tableData[index].chargeMethod!=6){
        if(label!=this.$t('ServiceFeeManagementLang.Payment_cost')){
          this.tabClickIndex=index
          this.tabClickLabel=label
        }
      }
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      this.tabClickIndex = null
      this.tabClickLabel = null   
    },
    //下拉框选择初始化
    inputType(type) {
      if(!type){
        this.tabClickIndex = null
        this.tabClickLabel = null    
      }
    },
    selectChange(row,prop){
      row[prop+'_name']=this.options.filter(item=>{return item.id==row[prop]}).length>0?this.options.filter(item=>{return item.id==row[prop]})[0].name:''
    },
    // 多选框勾选集合
    setCheckBox(data){
      this.sendDataArr=data
    },
    //多选框禁选
    checkSelectable({row}) {
        return row.must==0
    },
    // 提交
    confirm() {
      let type = true;
      let isComplete=true
      let arr=this.tableData.filter(item=>{return !!item.checked})
      arr.forEach(el=>{
        if((el.chargeMethod==6&&!el.whole_price)||(el.chargeMethod!=6&&!el.unitPrice)){
          type=false
          isComplete=false
        }
      })
      if(!isComplete){
        this.$message.warning(this.$t('LineManagementLang.message1'));
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        this.$emit("success",arr);
        this.cancel()
      }
    },
    //取消修改
    cancel() {
      this.tableData=[]
      this.Visible = false;
      this.tabClickIndex = null
      this.tabClickLabel = null 
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  /deep/ .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
    color:#409eff;
  }
</style>